<div class="dispatch-main-container">
  <div class="center-panel">
    <div class="weather-wrap">
      <app-weather-panel></app-weather-panel>
    </div>
    <div class="button-group">
      <!--      <nz-badge>
              <button class="btn-4" nz-button nzType="default">指令调度</button>
            </nz-badge>-->

      <nz-badge [nzCount]="applyAmount">
        <button class="btn-1" nz-button nzType="default" (click)="applyModalShow = true">加减水调度</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-3" nz-button nzType="default" (click)="openRecordModal()">水量调度记录</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-4" nz-button nzType="default" (click)="openDutyRecordModal()">交接班记录</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-6" nz-button nzType="default" (click)="openReportModal()">报送一览</button>
      </nz-badge>

      <nz-badge>
        <button class="btn-2" nz-button nzType="default" (click)="bbglModalShow = true">报表管理</button>
      </nz-badge>

      <!--
           <nz-badge>
             <button class="btn-2" nz-button nzType="default" (click)="jskllModalShow=true">干渠进水口流量</button>
           </nz-badge>


             <nz-badge>
               <button class="btn-4" nz-button nzType="default" (click)="tableModalShow = true">切换表格</button>
             </nz-badge>
             -->
    </div>

    <div class="canvas-wrap" #canvasDiv>
      <div id="zx-canvas" style="width: 1700px; height: 700px;"></div>

      <div class="gate-info" *ngIf="infoShow" [ngStyle]="{

                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="name"><b>{{hoverItem.name}}</b></div>
        <div class="feat">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div class="feat">当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="feat">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div class="feat">当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>

    <div class="legends">
      <button nz-button nzType="default" class="btn-type1">农业用水</button>
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('gysh')">工业生活</button>
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('st')">生态用水</button>
    </div>
  </div>

  <div class="right-panel">
    <app-zx-panel2></app-zx-panel2>
  </div>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1500"
    [(nzVisible)]="applyModalShow"
    [nzTitle]="'加减水记录'"
    [nzFooter]="null"
    (nzOnCancel)="onApplyCancel()">
    <app-dispatch-record (dispatchCount)="getDispatchCount($event)"></app-dispatch-record>
  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1500"
    [(nzVisible)]="recordModalShow"
    [nzTitle]="'水量调度记录'"
    [nzFooter]="null"
    (nzOnCancel)="recordModalShow=false">
    <app-water-record></app-water-record>
  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1300"
    [nzStyle]="{ top: '10px' }"
    [(nzVisible)]="dutyRecordModalShow"
    nzTitle="交接班记录"
    [nzFooter]="null"
    (nzOnCancel)="dutyRecordModalShow=false">
    <app-work-change></app-work-change>
  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1800"
    [nzStyle]="{ top: '20px' }"
    [(nzVisible)]="bbglModalShow"
    (nzOnCancel)="bbglModalShow=false"
    [nzFooter]="null"
    nzTitle="报表管理">
    <app-report-manage></app-report-manage>
  </nz-modal>

</div>
